import { LikeOutlined, MessageFilled, StarTwoTone } from '@ant-design/icons';
import { List, Tag } from 'antd';
import React from 'react';
import ArticleListContent from './ArticleListContent';
import useStyles from './index.style';

const Articles: React.FC = () => {
  const { styles } = useStyles();
  const IconText: React.FC<{
    icon: React.ReactNode;
    text: React.ReactNode;
  }> = ({ icon, text }) => (
    <span>
      {icon} {text}
    </span>
  );
  const listData: any = [
    {
      star: 128,
      like: 95,
      message: 32,
      href: '/article/1001',
      title: 'React Hooks 性能优化实战指南',
      content: '本文详细介绍了useMemo、useCallback等Hooks在实际项目中的优化技巧，附具体案例分析...',
      modifyTime: '2025-08-01 15:30:00',
      avatar: 'https://picsum.photos/id/64/200/200',
      owner: '张前端',
    },
    {
      star: 89,
      like: 67,
      message: 15,
      href: '/video/2023',
      title: 'TypeScript类型体操进阶训练',
      content: '从零开始讲解类型别名、泛型约束与条件类型，适合有一定TS基础的开发者提升...',
      modifyTime: '2025-07-28 09:15:22',
      avatar: 'https://picsum.photos/id/65/200/200',
      owner: '李程序',
    },
    {
      star: 215,
      like: 183,
      message: 47,
      href: '/post/567',
      title: '2025年前端框架趋势预测',
      content: '分析React、Vue、Svelte等框架的发展方向，以及Server Components等新特性的影响...',
      modifyTime: '2025-08-03 18:42:10',
      avatar: 'https://picsum.photos/id/66/200/200',
      owner: '王架构',
    },
    {
      star: 56,
      like: 42,
      message: 8,
      href: '/note/890',
      title: 'CSS Grid布局实战案例',
      content: '用Grid实现响应式卡片布局，解决传统float布局的痛点，代码简洁易维护...',
      modifyTime: '2025-07-25 11:08:33',
      avatar: 'https://picsum.photos/id/67/200/200',
      owner: '赵样式',
    },
    {
      star: 173,
      like: 142,
      message: 29,
      href: '/project/342',
      title: 'Node.js微服务架构设计',
      content: '从服务拆分到负载均衡，详解微服务在Node生态中的落地实践，附Docker配置示例...',
      modifyTime: '2025-08-02 14:55:47',
      avatar: 'https://picsum.photos/id/68/200/200',
      owner: '陈后端',
    },
    {
      star: 94,
      like: 76,
      message: 12,
      href: '/tool/751',
      title: '10个提升开发效率的VSCode插件',
      content: '推荐ESLint自动修复、Path Intellisense等实用插件，附配置方法和使用技巧...',
      modifyTime: '2025-07-30 16:20:15',
      avatar: 'https://picsum.photos/id/69/200/200',
      owner: '刘工具',
    },
  ];

  return (
    <List
      size="large"
      className={styles.articleList}
      rowKey="id"
      itemLayout="vertical"
      dataSource={listData}
      renderItem={(item: any) => (
        <List.Item
          key={item.id}
          actions={[
            <IconText key="star" icon={<StarTwoTone />} text={item.star} />,
            <IconText key="like" icon={<LikeOutlined />} text={item.like} />,
            <IconText key="message" icon={<MessageFilled />} text={item.message} />,
          ]}
        >
          <List.Item.Meta
            title={
              <a className={styles.listItemMetaTitle} href={item.href}>
                {item.title}
              </a>
            }
            description={
              <span>
                <Tag>Ant Design</Tag>
                <Tag>设计语言</Tag>
              </span>
            }
          />
          <ArticleListContent data={item} />
        </List.Item>
      )}
    />
  );
};
export default Articles;
